<template>
	<view>
		<flvPlayer :info="obj" :type="type" />
		<view v-if="type != 2">
			<view class="f18 bold p20">{{ obj.name + '(' + obj.no + ')' }}</view>
			<view class="line"></view>
			<view class="cantainer">
				<view class="flexR between">
					<view class="f16">实时检测</view>
					<view class="f16 time">{{ getTime(info.date) }}</view>
				</view>
				<view class="flexR between p20">
					<view>
						<image style="width: 15px;" mode="widthFix" src="@/static/imgs/icon1.png"></image>
						<span>温度</span>
					</view>
					<view>{{ info.temperature }}℃</view>
				</view>
				<view class="line"></view>
				<view class="flexR between p20">
					<view>
						<image style="width: 15px;" mode="widthFix" src="@/static/imgs/icon2.png"></image>
						<span>湿度</span>
					</view>
					<view>{{ info.humidity }}%</view>
				</view>
				<view class="line"></view>
				<view class="flexR between p20">
					<view>
						<image style="width: 15px;" mode="widthFix" src="@/static/imgs/icon3.png"></image>
						<span>空气颗粒度0.3μm</span>
					</view>
					<view>{{ info.particle3 }}个/L</view>
				</view>
				<view class="line"></view>
				<view class="flexR between p20">
					<view>
						<image style="width: 15px;" mode="widthFix" src="@/static/imgs/icon3.png"></image>
						<span>空气颗粒度0.5μm</span>
					</view>
					<view>{{ info.particle5 }}个/L</view>
				</view>
				<view class="line"></view>
				<view class="flexR between p20">
					<view>
						<image style="width: 15px;" mode="widthFix" src="@/static/imgs/icon3.png"></image>
						<span>空气颗粒度1.0μm</span>
					</view>
					<view>{{ info.particle10 }}个/L</view>
				</view>
				<view class="line"></view>
				<view class="flexR between p20">
					<view>
						<image style="width: 15px;" mode="widthFix" src="@/static/imgs/icon3.png"></image>
						<span>空气颗粒度2.5μm</span>
					</view>
					<view>{{ info.particle25 }}个/L</view>
				</view>
				<view class="line"></view>
				<view class="flexR between p20">
					<view>
						<image style="width: 15px;" mode="widthFix" src="@/static/imgs/icon3.png"></image>
						<span>空气颗粒度5.0μm</span>
					</view>
					<view>{{ info.particle50 }}个/L</view>
				</view>
				<view class="line"></view>
				<view class="flexR between p20">
					<view>
						<image style="width: 15px;" mode="widthFix" src="@/static/imgs/icon3.png"></image>
						<span>空气颗粒度10.0μm</span>
					</view>
					<view>{{ info.particle100 }}个/L</view>
				</view>
				<view class="line"></view>
				<view class="ptb10"><span>地点</span></view>
				<view style="margin-bottom: 10px;">
					{{ info.address }}
					<!-- <textarea v-model="info.address" class="area" placeholder="请输入" rows="6" /> -->
				</view>
				<button class="btn" @click="save">修改地址</button>
			</view>
		</view>
		<view></view>
	</view>
</template>

<script>
import flvPlayer from '@/components/flvPlayer.vue';
import { parseTime } from '@/utils/index'

export default {
	components: { flvPlayer },
	data() {
		return {
			num: 1,
			timer: null,
			obj: {},
			info: {address: ''},
		};
	},
	onLoad(params) {
		let pp = JSON.parse(params.info)
		this.obj = pp;
		this.type = params.type;
		if (this.type != 2) {
			this.refrersh();
			this.timer = setInterval(() => {
				this.refrersh();
			}, 3000)
		}
	},
	onUnload() {
		clearInterval(this.timer);
	},
	methods: {
		getTime(v) {
			if (!v) return '--'
			return parseTime(v)
		},
		refrersh() {
			this.$axios({
				method: 'get',
				url: `/senor/data/appOne?deviceNo=${this.obj.no}`,
			}).then(res => {
				let d = res.rows && res.rows[0] || {};
				this.info = d;
				this.$set(this.info, 'address', d.address);
				this.info.humidity = parseFloat(this.info.humidity * 1 / 10).toFixed(2)
				this.info.temperature = parseFloat(this.info.temperature * 1 / 10).toFixed(2)
			});
		},
		save() {
			uni.navigateTo({
				url: `/pages/edit?info=${JSON.stringify(this.info)}`
			});
			// this.$axios({
			// 	method: 'put',
			// 	url: '/senor/device/updateAddress',
			// 	data: {
			// 		"id": this.info.id,
			// 		"address": this.info.address,
			// 	},
			// }).then(res => {
			// 	this.$msg('操作成功')
			// })
		}
	}
}
</script>

<style lang="scss" scoped>
video {
	width: 100%;
	height: 200px;
}

.time {
	color: $theme;
}

.area {
	margin: 10px 0;
	border: 1px solid #e8e8e8;
	border-radius: 6px;
	padding: 10px;
	height: 100px;
	width: 100%;
}

.btn {
	margin-bottom: 10px;
	width: 80%px;
	height: 40px;
	// position: sticky;
	// bottom: 10px;
	line-height: 40px;
	border-radius: 20px;
	background-color: rgba(17, 168, 163, 1);
	color: rgba(255, 255, 255, 1);
	font-size: 16px;
	text-align: center;
}
</style>
